<template>
	<view class="all-box containers" >
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton>
		<view v-if="netWorkType!='none'"> 
	   
		<!-- 顶部滚动 -->
		    <view style="background-color: #FFFFFF;">
				<scroll-view class="scroll-view_H" scroll-x="true"  >
					<view class="scroll-item  " :class="{active:curActive==index}" @tap="hoverFamily(item,index)" v-for="(item,index) in data.familyList">{{item.name}}</view>
				   <view class="scroll-item" @tap="addFamily" style="position: relative;top: 14px;">
					   <image :src="OSS_HOST+'health/add_icon.png'" style="width: 200rpx; height: 80rpx !important; background-color: #FFFFFF;"></image>
				   </view>
				</scroll-view>
			</view>
			<!-- 检测结果 -->
			<view class="test-result pad-all15 bg-white">
			
				<view class="flex-box">
					<view v-if="data.list.sp" class="flex-start-box">
						<view class="font16 font-bold">健康数据</view>
						<view v-if="data.list.sp<140" class="tag normal font-white font12">正常</view>
						<view v-else class="tag danger font-white font12">异常</view>
						<!-- sp大于等于140都是异常 -->
					</view>
					<view v-else class="font16 font-bold">暂无数据</view>
			
					<view @tap="delTips">
						<text class="iconfont padleft5 font12 font-gray" style="color: #C7D2DE !important; margin-right: 10rpx;">&#xe70f; </text>
						<text class="font12 font-gray2" style="color: #C7D2DE;">删除家人</text>
			
					</view>
				</view>
				<view v-if="data.list.sp" class="date-time font-gray font12 padtop5">
					{{data.list.create_time}}
				</view>
				<view class="flex-box padtop15 result-data padbottom15">
					<view class="v-item text-center">
						<view v-if="data.list.sp">
							<view :class="[data.list.sp<140 ? 'font24 ' : 'font24 danger-color']">{{data.list.sp}}</view>
							<view class="font-gray2 font12">收缩压</view>
							<view class="font-gray2 font12">mmHg</view>
						</view>
						<view v-else class="no-data-style">
							- -
						</view>
			
					</view>
					<view class="v-item text-center center">
						<view v-if="data.list.dp">
							<view class="font24  ">{{data.list.dp}}</view>
							<view class="font-gray2 font12">舒张压</view>
							<view class="font-gray2 font12">mmHg</view>
						</view>
						<view v-else class="no-data-style">
							- -
						</view>
					</view>
					<view class="v-item text-center">
						<view v-if="data.list.dp">
							<view class="font24  ">{{data.list.heart}}</view>
							<view class="font-gray2 font12">脉搏</view>
							<view class="font-gray2 font12">bpm</view>
						</view>
						<view v-else class="no-data-style">
							- -
						</view>
					</view>
				</view>
			</view>
			<!-- 检测结果end -->
			
			<view class="week-trend  padbottom15 bg-white padtop15">
				<view class="flex-box padleft15 padright15">
					<text class="font16 font-bold">血压波动趋势</text>
					<view>
						<text class="circle-icon margin-right5"></text> <text class="font12" font12>高压</text>
						<text class="circle-icon low margin-right5 marginleft15"></text> <text class="font12">低压</text>
					</view>
				</view>
			
				<view class="f2_container">
					 <canvas  type="2d" class="f2-canvas"    @touchStart="touchStart" @touchMove="touchMove" @touchEnd="touchEnd" /> 
				</view>
				 
			</view>
			
			<!-- 检测记录 -->
			<view class="check-box">
				<view class="title">检测记录</view>
				<scroll-view scroll-y="true" style="height: 522rpx; " @scrolltolower="scrolltolower">
				 
					<view class="list-item" v-for="item in data.checkList">
						<view class="flex-start-box">	
							<view class="tag normal font-white font12" v-if="item.sp<140">正常</view>
							<view class="tag danger font-white font12" v-else>异常</view>
							<view class="date">{{item.create_time}}</view>
						</view>
						<view class="desc">
							{{item.sp}}/{{item.dp}} <text class="date">mmHg</text>{{item.heart}}<text class="date">dpm</text>
						</view>
					</view>
					<tui-divider width="60%" divideColor="red">我也是有底线的</tui-divider>
				</scroll-view>
			</view>
		</view>
		<!-- 删除提示 -->
		 <tui-modal class="create-modal" :show="showDelTips"   @cancel="delHide" custom="true" color="#333" :size="32"   shape="circle">
		 	<view class="title">删除家人？</view>
		 	<view class="desc">
		 		 删除后见无法查看家人数据
		 	</view>
		 	<view class="flex-box">
		 		<view class="btn-close" @tap="delHide">取消</view>
		 		<view class="btn-submit" @tap="confirmDel"  >删除</view>
		 		
		 	</view>
		 </tui-modal>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		<!-- 登录弹窗 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />

	</view>
</template>
<script>

	import tuiDivider from "@/components/divider/divider.vue"
	import {oss_host} from '@/config/config.js';
	import Vue from 'vue'
	import store from '@/store/index.js';
	import tuiModal from "@/components/modal/modal"
	import F2 from '@/js_sdk/uni-f2/f2.min.js'
	function wrapEvent(e) {
	  if (!e) return
	  if (!e.preventDefault) {
	    e.preventDefault = function() {}
	  }
	  return e
	}
	 
	let chart = null
	const lineCharts = {},
		optionAs = {};
	import {
		mapGetters
	} from 'vuex'; 
	export default {
		 
		components: {
			 tuiModal,
			 tuiDivider
		},
		computed: { 
		 
			//注册网络状态
			...mapGetters(['netWorkType', 'loginStatus'])
		},
		data() {
			return {
				OSS_HOST: oss_host,
				skeletonShow:true,
				curActive:0,
				user_id:0,
				data: {
					familyList:[],
					checkList:[],
					list: [], 
					echartsData:[],
				},
				delId:0 ,
				showDelTips:false,
				curPage:0,
				totalPage:0
 			}
		},
		onLoad(e) {
			 
		      this.getList()
			  this.familyCheckList();
			  
			   
		},
		onShow() {
			 

		},
	 
		methods: {
			 

			 getList() {
				let _this = this
				let opt = {
					url: '/blutdruck_check/familyRelation',
					data: {
						user_id: this.user_id
					},
					success: function(res) {
						 
						if (res.status == 1) {
							_this.data.list = res.data.check;
							_this.data.familyList = res.data.familyList; 
							_this.data.echartsData = res.data.echarts.value;
				
							_this.initChart()
							 
							_this.skeletonShow = false;
							 
						}else{
						 
								_this.$refer.setVilit('/blood-pressure/family/index')
								let callback = function(url) {
									 
								}
								let data = {
									active_type:1
								}
								_this.$refer.toUrl(callback,data)
								return ;
							
						}  
					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}

			},
			familyCheckList(){
				let _this = this
				let opt = {
					url: '/blutdruck_check/familyCheckList', 
					data: {
						user_id: this.user_id,
						page:++this.curPage
					},
					success: function(res) {
						 
						if (res.status == 1) {
							if(_this.curPage==1){
								_this.data.checkList = res.data.checkList; 
								_this.totalPage = res.data.totalPage;
								
							}else{
								_this.data.checkList.concat(res.data.checkList); 
							} 
							 
						}  
					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			},
			initChart() {
			
				const query = uni.createSelectorQuery().in(this);
				query.select('.f2-canvas')
				  .fields({
				    node: true,
				    size: true
				  })
				  .exec(res => {
				    const { node, width, height } = res[0];
				    const context = node.getContext('2d');
				    const pixelRatio = wx.getSystemInfoSync().pixelRatio;
				    // 高清设置
				    node.width = width * pixelRatio;
				    node.height = height * pixelRatio;
				    const config = { context, width, height, pixelRatio };
			
					// // 实例化chart
					const chart = new F2.Chart(config)
					chart.legend(false)
					// Tooltip 配置
					chart.tooltip({
					  showTitle: true, // 展示  tooltip 的标题
					  layout: 'vertical'
					});
					chart.scale('value', {
						min: 0,
					    ticks: [ 0, 60, 120, 180, 240 ],
					});
					//数据源
					chart.source(this.data.echartsData);
					chart.line().position('date*value').color('type');
					chart.render();
			
				    if (chart) {
				      this.chart = chart;
				      this.canvasEl = chart.get('el');
				    }
				  });
			}, 
			hoverFamily(item,index){
				this.curActive = index
				this.delId = item.id
				this.user_id = item.relation_user_id 
				 
				this.data.checkList=[],
				this.data.list= [], 
				this.data.echartsData=[],
				this.curPage=0;
				this.totalPage=0;
			 
				this.getList()
				this.familyCheckList()
			},
			addFamily(){
				let _this = this
				this.$refer.setVilit('/blood-pressure/family/index')
				let callback = function(url) {
					 
				}
				let data = {
					active_type:2,
					user_id:uni.getStorageSync('login_uid')
				}
				this.$refer.toUrl(callback,data)
			},
			delTips(){
				this.showDelTips = true;
			},
			confirmDel(){
				
				if(this.curActive==0){
					this.delId =  this.data.familyList[0].id
				}
				
		 
				let _this = this
				let opt = {
					url: '/user_member/delFamily', 
					data: {
						id: this.delId 
					},
					success: function(res) {
						 _this.showDelTips = false
					 
						if (res.status == 1) {
							let options = {
								msg: '删除成功',
								type: 'green'
							};
							_this.$refs.toast.showTips(options);
							
							 
							//切换显示第一位
							_this.curActive = 0;
							_this.user_id = 0;
							_this.curPage= 0 ;
							_this.totalPage = 0;
							_this.getList()
							_this.familyCheckList(); 
							 
						}else{
							let options = {
								msg: '删除失败',
								type: 'danger'
							};
							_this.$refs.toast.showTips(options);
							 
						} 
						 
					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			},
			delHide(){
				this.showDelTips=false;
			},
			scrolltolower(){ 
				if(this.curPage>=this.totalPage){
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
					return ;
				}
				
				this.familyCheckList();
				
			},
			touchStart(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchstart', wrapEvent(e))
			},
			touchMove(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchmove', wrapEvent(e))
			},
			touchEnd(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchend', wrapEvent(e))
			}

		}
	}
</script>

<style lang="scss">
	@import "./detail.scss";
</style>
